const CracoLessPlugin = require('craco-less');
const path = require('path');
const AntDesignThemePlugin = require('antd-theme-webpack-plugin');
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin');

const antdThemeVariables = [
    '@primary-color',
    '@error-color',
    '@info-color',
    '@success-color',
    '@processing-color'
];

const lessModifyVars = {
}

module.exports = {
    babel: {
        plugins: [
            ["@babel/plugin-proposal-decorators", { legacy: true }], //装饰器
            [
                "import",
                {
                    libraryName: "antd",
                    libraryDirectory: "es",
                    style: true //设置为true即是less
                }
            ]
        ]
    },
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: lessModifyVars,
                        javascriptEnabled: true
                    }
                }
            }
        },
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: lessModifyVars,
                        javascriptEnabled: true
                    }
                },
                modifyLessRule(lessRule, context) {
                    lessRule.test = /\.module\.(less)$/
                    lessRule.exclude = undefined
                    return lessRule
                },
                cssLoaderOptions: {
                    modules: {
                        localIdentName: '[local]_[hash:base64:5]'
                    }
                }
            }
        }
    ],
    webpack: {
        // 别名
        alias: {
            "@": path.resolve("src"),
            assets: path.resolve(__dirname, "src/assets")
        },
        // 配置
        configure: (config, { env, paths }) => {
            // =====================rules=====================
            config.module.rules.push({
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                issuer: {
                    test: /\.jsx?$/
                },
                use: ['babel-loader', '@svgr/webpack', 'url-loader']
            });


            // =====================plugins=====================
            // antd theme 插件
            config.plugins.push(new AntDesignThemePlugin({
                antDir: path.join(__dirname, './node_modules/antd'),
                stylesDir: path.join(__dirname, './src/assets/shared/antd'),
                varFile: path.join(__dirname, './src/assets/shared/antd/variables.less'),
                mainLessFile: path.join(__dirname, './src/assets/shared/antd/index.less'),
                themeVariables: antdThemeVariables,
                indexFileName: 'index.html',
                generateOnce: false
            }));

            // 打包进度 插件
            config.plugins.push(new SimpleProgressWebpackPlugin());

            return config;
        }
    },    
    devServer: {
        port: 9000,
        host: '127.0.0.1'
    }
};
